<script setup>
import {defineEmits, defineProps} from 'vue'


// 通过定义变量接收或解构数据使用，接受的值可直接在setup语法糖中使用
//  解构数据 子组件获取父组件的值
const {total, pageNo, pageSize} = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageNo: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 8
  }
})


// 子组件获取到父组件的值用defineEmit
const emits = defineEmits([
  "pageSizeChange",
  "pageChange"
])



//  默认页数改变时触发
let handleSizeChange = (val) => {
  emits('pageSizeChange', val)
}

// 当前页改变时触发   val当前页
let handleCurrentChange = (val) => {
  emits('pageChange', val)
}

</script>

<template>
  <!--total:共多少条数据  current-page:当前页数   page-size:默认显示多少条    -->
  <!-- size-change	page-size 改变时触发-->
  <!-- current-change	当前页数 改变时触发-->
  <div class="demo-pagination-block">
    <div style="width: 500px;margin-left: 350px">
      <el-pagination :total="total"
                     :current-page="pageNo"
                     :page-size="pageSize"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="[5, 10, 15, 20]"
                     :small="true" :background="true"
                     layout="total, sizes, prev, pager, next, jumper"/>
    </div>
  </div>

</template>

<style scoped lang="scss">
// 分页
.demo-pagination-block {
  height: 70px;
  width: 932px;
  line-height: 70px;
  border-radius: 0px 0px 10px 10px;
}
</style>